import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    Image,
    StyleSheet
} from 'react-native';

import {
    Press
} from './../../components';

interface Props {
    arrow: any,
    value: any,
    title: any,
    onPress: Function,
    valueStyle?: any,
    contentStyle?:any,
    renderRight: Function,
    renderLeft: Function,
    titleStyle?:any,
    style?:any
}

import next_icon from './img/next.png';

import * as Const from './../../const';

class Arrow extends PureComponent<Props> {

    static defaultProps = {
        value: ``,
        title: ``,
        arrow: null,
        onPress: () => null,
        renderLeft: () => null,
        renderRight: () => null
    }

    get Arrow() {
        const {
            arrow
        } = this.props;
        if (arrow === false) {
            return null
        }
        return !!arrow ? arrow : (
            <Image
                source={next_icon}
                style={styles.arrow}
            />
        )
    }

    render() {
        const {
            title,
            value,
            style,
            children,
            onPress,
            contentStyle,
            titleStyle,
            valueStyle,
            renderLeft,
            renderRight
        } = this.props;

        const _styles = (
            [styles.container,style]
        )

        return (
            <Press style={_styles} onPress={onPress}>
                <View style={[styles.row,contentStyle]}>
                    <View style={styles.left}>
                        {renderLeft(value)}
                        <Text style={[styles.title,titleStyle]}>
                            {title}
                        </Text>
                    </View>
                    <View style={styles.right}>
                        <Text
                            children={value}
                            numberOfLines={1}
                            style={[styles.value, valueStyle]}
                        />
                        {renderRight()}
                        {this.Arrow}
                    </View>
                </View>
                {children}
            </Press>
        )
    }
}

export default Arrow;

const styles = StyleSheet.create({
    container: {
        borderBottomWidth:1,
        borderColor:`#f0f0f0`,
        backgroundColor:`#fff`
    },
    row: {
        height: 52,
        alignItems: `center`,
        flexDirection: `row`,
        justifyContent: `space-between`
    },
    title: {
        fontSize: 15,
        color: `#333`,
        fontWeight:`bold`
    },
    left: {
        alignItems: `center`,
        flexDirection: `row`
    },
    right: {
        flex: 1,
        paddingLeft: 12,
        alignItems: `center`,
        flexDirection: `row`
    },
    value: {
        flex: 1,
        fontSize: 15,
        color: `#444`,
        marginRight: 2,
        textAlign: `right`
    },
    arrow: {
        width: 24,
        height: 24
    }
}) as any;